<template>
    <!-- <div class="w-full bg-[#f7f7f7]"> -->
    <div class="mx-auto w-full max-w-md p-6 page-account">
        <div class="flex-1">
            <div class="mt-9">
                <div class="flex justify-center mb-5"><img class="h-[75px]" src="@/assets/logo-light.svg" alt="">
                </div>
                <div class="flex justify-center mb-5 text-[14px] text-[#515a6e]">请输入您的帐户信息以开始管理您的项目</div>
            </div>
            <div class="mt-6">
                <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" size="large"
                    label-width="auto">
                    <el-form-item prop="account" class="!mb-6">
                        <el-input v-model="form.account" type="text" autocomplete="off" :prefix-icon="Avatar"
                            placeholder="请输入邮箱地址">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" type="password" autocomplete="off" placeholder="请输入密码"
                            show-password :prefix-icon="Lock"></el-input>
                    </el-form-item>
                    <el-form-item class="!mb-8">
                        <el-button class="w-full" type="primary" @click="submitForm(ruleFormRef)" :loading="flag">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div>
            <Footer />
        </div>
    </div>
    <!-- </div> -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Avatar, Lock } from '@icon-park/vue-next'
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import Footer from "@/components/footer.vue";
import { userMode } from '@/stores/user'
const userStore = userMode()

import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const ruleFormRef = ref<FormInstance>()
const form = ref({
    account: '',
    password: ''
})
const flag = ref(false)
const rules = ref({
    account: [
        { required: true, message: '请输入账号', trigger: 'blur' }, 
        { min: 0, max: 30, message: '长度在 0 到 30 个字符', trigger: 'blur' },
        {
            pattern: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: '请输入正确的邮箱格式',
            trigger: 'blur'
        }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 8, max: 12, message: '长度在 8 到 12 个字符', trigger: 'blur' }
    ]
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            try {
                flag.value = true
                const res = await userStore.userlogin(form.value)
                if (res) {
                    flag.value = false
                    ElMessage.success('登陆成功');
                    const redirect = route.query.redirect as string;
                    const redirectUrl = redirect ? decodeURIComponent(redirect) : '/dashboard';
                    router.push(redirectUrl);
                }
            } catch (error) {
                console.log(error)
                flag.value = false
            }
        } else {
            console.log('error submit!')
        }
    })
}

</script>

<style scoped></style>